<script>
import { provide, toRefs } from 'vue'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    const clickFn = (item, index) => {
      console.log(item, index)
      emit('update:modelValue', item.props.name)
      emit('tab-click', {
        tab: item,
        index: index
      })
    }
    // 直接传props.xxx  会失去响应式
    const { modelValue } = toRefs(props)
    provide('activeName', modelValue)
    return {
      clickFn
    }
  },
  render () {
    // this.$slots.default()  获取插槽     <slot></slot>
    const arr = this.$slots.default()
    console.log(arr)
    const panels = []
    arr.forEach(item => {
      // 处理基本写法
      if (item.type.name === 'XtxTabsPanel') {
        panels.push(item)
      } else {
        if (item.children && item.children[0]?.type?.name === 'XtxTabsPanel') {
          item.children.forEach(panel => {
            panels.push(panel)
          })
        }
      }
    })

    const navs = (
      <nav>
        {
          panels.map((item, index) => {
            return (
              <a
              class={{active: this.modelValue === item.props.name}}
              onClick={() => this.clickFn(item, index)}
              >
              {item.props.label}
              </a>
            )
          })
        }
      </nav>
    )
    return (
      <div class="xtx-tabs">
      {[navs, panels]}
      </div>)
  }
}
</script>
<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
